<script setup>
import { ref } from 'vue'
// 在导入语句中添加 Lock 图标
import { Lock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 添加表单引用
const form = ref()
//控制注册与登录表单的显示， 默认显示注册
const isRegister = ref(false);

const title = ref('重置密码')
//定义数据模型
const registerData = ref({
    old_pwd: '',
    new_pwd: '',
    re_pwd: ''
})

//校验密码的函数
const checkRePassword = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请再次确认密码'))
    } else if (value !== registerData.value.new_pwd) {
        callback(new Error('两次密码不一致'))
    } else {
        callback()
    }
}

// 校验旧密码是否匹配 store 中的密码
const checkOldPassword = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入旧密码'))
    } /* else if (value !== userInfoStore.info.password) {
        callback(new Error('旧密码不正确'))
    } */ else {
        callback()
    }
}

import useUserInfoStore from '@/stores/userInfo.js';
const userInfoStore = useUserInfoStore();

//定义表单校验规则
const rules = {
    old_pwd: [
        { required: true, message: '请输入旧密码', trigger: 'blur' },
        { min: 5, max: 16, message: '长度为5~16位非空字符', trigger: 'blur' },
        { validator: checkOldPassword, trigger: 'blur' }
    ],
    new_pwd: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 5, max: 16, message: '长度为5~16位非空字符', trigger: 'blur' }
    ],
    re_pwd: [
        { validator: checkRePassword, trigger: 'blur' }
    ]
}

//清空数据
const clearData = () => {
    registerData.value = {
        old_pwd: '',
        new_pwd: '',
        re_pwd: ''
    }
}

import { userPasswordUpdateService } from '@/api/user.js'
import { useRouter } from 'vue-router';
const router = useRouter();

// 修改密码
const updatePassword = async () => {

    const result = await userPasswordUpdateService(registerData.value)

    // 检查接口返回结果
    if (result.code == 0) {
        ElMessage.success(result.message ? result.message : '修改成功');
        clearData()
        isRegister.value = false
        userInfoStore.removeInfo()
        router.push('/login')
    } else {
        // 统一处理所有非成功情况
        // 使用唯一的错误提示，避免重复
        ElMessage.error(result.message ? result.message : '修改失败')
    }

}
</script>


<template>
    <el-card class="page-container">
        <div class="button-example">
            <div class="button-row">
                <el-button type="danger" round @click="isRegister = true">重置密码</el-button>
            </div>
            <el-dialog v-model="isRegister" :title="title" width="30%">
                <el-form ref="form" size="large" autocomplete="off" :model="registerData" :rules="rules"
                    label-width="100px" style="padding-right: 30px">
                    <el-form-item prop="old_pwd">
                        <el-input :prefix-icon="Lock" type="password" placeholder="请输入旧密码"
                            v-model="registerData.old_pwd"></el-input>
                    </el-form-item>
                    <el-form-item prop="new_pwd">
                        <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码"
                            v-model="registerData.new_pwd"></el-input>
                    </el-form-item>
                    <el-form-item prop="re_pwd">
                        <el-input :prefix-icon="Lock" type="password" placeholder="请输入再次密码"
                            v-model="registerData.re_pwd"></el-input>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="isRegister = false; clearData()">取消</el-button>
                        <el-button type="primary" @click="updatePassword"> 确认
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </el-card>
</template>

<style scoped>
.button-example {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.button-row .el-button {
    width: 200px;
    /* 设置按钮宽度 */
    height: 60px;
    /* 设置按钮高度 */
    font-size: 18px;
    /* 增大字体 */
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    height: 80vh;
}

.button-row>* {
    margin: 0;
}
</style>